<template>
  <div>
    <div class="buttonlist">
      <el-button type="primary" @click="handClick(1)">修改</el-button>
      <el-button type="primary" @click="handClick(2)">发起立项认证会</el-button>
      <el-button type="primary" @click="handClick(3)">征求意见表上报</el-button>
      <el-button type="primary" @click="handClick(4)">发起评审会</el-button>
      <el-button type="primary" @click="handClick(5)">发起文档审查</el-button>
      <el-button type="primary" @click="handClick(6)">导出</el-button>
    </div>
    <el-divider />
    <el-form
      :model="formInline"
      class="form-inline"
      label-width="auto"
      label-position="top"
    >
      <el-form-item
        v-for="(item, index) in addFormList.slice(4)"
        :key="index"
        :label="item.label"
      >
        <!-- input -->
        <el-input
          v-if="item.type === 'input'"
          v-model="formInline[item.prop]"
          placeholder="请输入"
          clearable
        />
        <!-- select -->
        <el-select
          v-if="item.type === 'select'"
          v-model="formInline[item.prop]"
          placeholder="请选择"
        >
          <el-option
            v-for="j in item.options"
            :key="j.value"
            :label="j.label"
            :value="j.value"
          />
        </el-select>

        <!-- textarea -->
        <el-input
          v-if="item.type === 'textarea'"
          v-model="formInline[item.prop]"
          placeholder="请输入"
          :rows="4"
          type="textarea"
          clearable
        />
      </el-form-item>
    </el-form>
    <div>
      <p>五、标准主要编写成员姓名、职称、工作单位</p>
      <vxe-grid
        ref="xGrid"
        v-bind="addGridOptions"
        :height="height"
        style="width: 100%"
      >
        <template #operate="{ row }">
          <template v-if="hasActiveEditRow(row)">
            <vxe-button content="取消" @click="clearRowEvent" />
            <vxe-button
              status="primary"
              content="保存"
              @click="saveRowEvent(row)"
            />
          </template>
          <template v-else>
            <vxe-button content="编辑" @click="editRowEvent(row)" />
          </template>
          <vxe-button
            status="danger"
            content="删除"
            @click="removeRowEvent(row)"
          />
        </template>
        <template #patentName_edit="{ row }">
          <vxe-input v-model="row.patentName" />
        </template>
        <template #patentPhone_edit="{ row }">
          <vxe-input v-model="row.patentPhone" />
        </template>
        <template #patentType_edit="{ row }">
          <vxe-input v-model="row.patentType" />
        </template>
      </vxe-grid>
      <el-button type="primary" text :icon="Plus" @click="addInventor">
        增加成员
      </el-button>
    </div>
    <el-form
      :model="formInline"
      class="form-inline margin-top20"
      label-width="auto"
      label-position="top"
    >
      <el-form-item
        v-for="(item, index) in formList"
        :key="index"
        :label="item.label"
      >
        <!-- textarea -->
        <el-input
          v-if="item.type === 'textarea'"
          v-model="formInline[item.prop]"
          placeholder="请输入"
          :rows="4"
          type="textarea"
          clearable
        />
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup lang="ts">
  import { ref, h, withDefaults, defineProps } from 'vue'
  import { addFormList, addGridOptions } from '../table/column'
  import {
    VXETable,
    VxeGridInstance,
    VxeGridProps,
    VxeGridListeners,
  } from 'vxe-table'
  import { Delete, Plus } from '@element-plus/icons-vue'
  import { useRouter } from 'vue-router'
  const props = withDefaults(
    defineProps<{
      names?: string
    }>(),
    {
      names: '默认名称',
    }
  )
  const router = useRouter()
  const handClick = (num) => {
    switch (num) {
      case 1:
        console.log('修改')

        break
      case 2:
        router.push({ path: 'addInitiateMeeting', query: { type: 1 } })
        break
      case 3:
        router.push('addSolicitOpinions')
        break
      case 4:
        router.push({ path: 'addInitiateMeeting', query: { type: 2 } })
        break
      case 5:
        ElMessageBox({
          title: '发起文档审查',
          message: h('div', null, [
            h('p', null, '标准名称：', [h('span', null, props.names)]),
            h('p', null, '确认要发起文档审查？'),
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        })
          .then((action) => {
            console.log(action, 1)
          })
          .catch((action) => {
            console.log(action, 2)
          })
        break
      case 6:
        console.log('导出')

        break
    }
  }

  const formList = ref([
    {
      label: '六、标准起草单位审核意见',
      prop: 'i',
      type: 'textarea',
    },
    {
      label: '七、公司标准化专业组审核意见',
      prop: 'j',
      type: 'textarea',
    },
    {
      label: '八、科技信息部审批意见',
      prop: 'k',
      type: 'textarea',
    },
  ])

  const formInline = ref({})
  const xGrid = ref()

  const hasActiveEditRow = (row: any) => {
    const $grid = xGrid.value
    if ($grid) {
      return $grid.isEditByRow(row)
    }
    return false
  }

  const editRowEvent = (row: any) => {
    const $grid = xGrid.value
    if ($grid) {
      $grid.setEditRow(row)
    }
  }

  const saveRowEvent = async (row: any) => {
    const $grid = xGrid.value
    if ($grid) {
      await $grid.clearEdit()
      patentPeople.loading = true
      // 模拟异步保存
      setTimeout(() => {
        patentPeople.loading = false
        // VXETable.modal.message({ content: `${JSON.stringify(row)}`, status: 'success' })
        // console.log(row)
        // patentPeople.data.push(row)
      }, 300)
    }
  }

  const removeRowEvent = async (row: any) => {
    const $grid = xGrid.value
    // console.log($grid.data.length,'====');

    // if($grid.data.length === 1){
    //   VXETable.modal.message({ content: '至少需要保留一条数据', status: 'error' })
    //   return
    // }

    const type = await VXETable.modal.confirm('您确定要删除该数据?')
    if ($grid) {
      if (type === 'confirm') {
        await $grid.remove(row)
      }
    }
  }
  const addInventor = () => {
    const $grid = xGrid.value
    $grid.insert({})
  }

  const tablePage = reactive({
    total: 0,
    currentPage: 1,
    pageSize: 10,
  })

  const handlePageChange: VxePagerEvents.PageChange = ({
    currentPage,
    pageSize,
  }) => {
    tablePage.currentPage = currentPage
    tablePage.pageSize = pageSize
    // findList()
  }

  const height = ref(0)
  const $baseTableHeight = inject('$baseTableHeight')
  onBeforeMount(() => {
    window.addEventListener('resize', handleHeight)
  })

  onBeforeUnmount(() => {
    window.removeEventListener('resize', handleHeight)
  })

  const handleHeight = () => {
    height.value = $baseTableHeight(0)
  }
</script>

<style scoped lang="scss">
  $margin-bottom: 20px;
  .title {
    border-radius: 2px;
    border-left: 5px solid #1890ff;
    height: 28px;
    background: #f7f8f9;
    font-weight: 500;
    font-size: 14px;
    color: #606266;
    padding-left: 12px;
    line-height: 28px;
    margin-bottom: $margin-bottom;
  }
  .margin-top20 {
    margin-top: $margin-bottom;
  }

  .buttonlist {
    display: flex;
    justify-content: flex-end;
  }

  .demo-form-inline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-row-gap: 16px;
    grid-column-gap: 20px;
    .el-input {
      // --el-input-width: 323px;
    }
    .el-select {
      // --el-select-width: 323px;
    }
    :deep(.el-form-item__label) {
      padding: 0 5px 0 0;
    }

    :deep(.el-form-item) {
      margin-right: 0px;
      margin-bottom: 0px;
    }
  }

  .flexBox {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 20px;
  }

  .formCard {
    border-radius: 4px;
    .formCardtitle {
      background: #e7f3ff;
      font-size: 12px;
      color: #7d8398;
      padding-left: 10px;
      height: 24px;
      line-height: 24px;
      border-radius: 4px 4px 0 0;
    }
    .cardForm {
      background: #f6fbff;
      padding: 20px;
      border-radius: 0 0 4px 4px;
      .el-input {
        // --el-input-width: 421px;
      }
    }
  }

  .demo-form {
    :deep(.el-form-item__content) {
      display: block;
    }
    .el-input {
      --el-input-width: 50%;
    }

    .el-select {
      --el-select-width: 50%;
    }
  }
  .last {
    margin-top: $margin-bottom;
  }

  .form-inline {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
  }
</style>
